<template>
  <div>
    <XmTable :config="{
      ...complaintTableConfig,
      getParams: getTableParams,
    }" class="table" ref="table">
      <div slot="filter">
        <el-form :inline="true" class="pl-20">
          <el-form-item label="创建时间">
            <el-date-picker v-model="form.time" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
              size='small' :clearable='false' :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="后台单号">
            <el-input size='small' v-model="form.xmbzNo" placeholder="后台单号"></el-input>
          </el-form-item>
          <el-form-item label="处理状态">
            <XmSelect :options="stateList" v-model="form.handleState" placeholder="处理状态" :config="{valueKey: 'dictKey', labelKey: 'dictValue'}" clearable size='small'></XmSelect>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fetch" size='small' plain icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <template slot="column-complaintLevelName" slot-scope="{data}">
        <el-tag :type="getcomplaintLevelClass(data.complaintLevel )">{{data.complaintLevelName}}</el-tag>
      </template>
      <template slot="column-deliveryTime" slot-scope="{data}">
        <span>
          {{data.deliveryStartTime}}~{{data.deliveryEndTime.split(' ')[1]}}
        </span>
      </template>
      <template slot="column-complaintContent" slot-scope="{data}">
        <pre>{{data.complaintContent}}</pre>
      </template>
      <template slot="column-operate" slot-scope="{data}">
        <el-button class="mt-5 ml-5" size="mini" @click="viewUpdateGoodsOrderLog(data)">
          日志
        </el-button>
      </template>
    </XmTable>

    <orderLogDialog ref="orderLogDialog"></orderLogDialog>
  </div>
</template>

<script>
import { complaintTableConfig } from '../config'
import orderLogDialog from '@/components/dialog/orderLogDialog'
import { mapGetters } from 'vuex'
import { getHandleStateList } from "@/api/workorder"


export default {
  props: {
  },
  components: {
    orderLogDialog,
  },
  data() {
    return {
      complaintTableConfig,
      stateList: [],
      form: {
        time: [
          this.dayjs(new Date()).format("YYYY-MM-DD 00:00:00"),
          this.dayjs(new Date()).format("YYYY-MM-DD 23:59:59"),
        ],
        xmbzNo: '',
        handleState: '',
      },
      activeTab: {
        value: ''
      }
    }
  },
  computed: {
    ...mapGetters(['permission']),
  },
  methods: {
    fetch() {
      this.$refs.table && this.$refs.table.fetch().then(res => {
        this.$emit('fetch', res)
      })
    },
    getTableParams() {
      const pageParams = this.$refs.table.getPageParams()
      const params = {
        ...pageParams,
        handleState: this.form.handleState || undefined,
        xmbzNo: this.form.xmbzNo,
        personLiable: this.userInfo.account,
        sort: 'handleState',
        order: 'asc',
      }
      if (this.form.time && this.form.time.length) {
        params.workOrderStartTime = this.dayjs(this.form.time[0])
          .format("YYYY-MM-DD 00:00:00")
        params.workOrderEndTime = this.dayjs(this.form.time[1])
          .format("YYYY-MM-DD 23:59:59")
      }
      return params
    },
    getcomplaintLevelClass (complaintLevel) {
      if (complaintLevel > 3) {
        return 'danger'
      }
      if (complaintLevel > 2) {
        return 'warning'
      }
      return 'info'
    },
    viewUpdateGoodsOrderLog(data) {
      this.$refs.orderLogDialog.show({ orderId: data.orderId })
    },
    getStateList() {
      getHandleStateList().then(res => {
        this.stateList = res.data.data || []
      })
    }
  },
  created() {
    this.userInfo = JSON.parse(window.localStorage.getItem("saber-userInfo")).content
    this.authoritys = this.userInfo.authority.split(',')
    this.getStateList()
  }
}
</script>

<style lang="scss" scoped>
.goods-item {
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 4px;
  margin-bottom: 5px;
  text-align: center;
}
</style>
